<!--
 * @Author: wangding
 * @Date: 2020-11-11 15:58:31
 * @LastEditTime: 2021-01-27 10:46:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\sale\add.vue
-->
<template>
    <div class="buyPage-main-box-add">
        <el-dialog
        :title="$t('add')"
        :visible="newVisible"
        width="700px"
        @close="()=>{$store.commit('setNewVisible',false)}"
        :close-on-click-modal='false'
        >
            <el-row :gutter="20">
                <el-col :span="20" :offset="2">
                    <el-form ref="form" :model="form" label-width="180px" >
                        <el-form-item :label="$t('payConfirm.wifiSN')" :prop="key" :rules="[{ required: true, message: $t('index_js_notNull')}]" v-for='(value,key,index) in form' :key='key'>
                            <el-input v-big v-model="form[key]" :placeholder="$t('common.info.pl-insert-content')"></el-input>
                            <span class="icon-fontsize" @click='addFormValue(key)'><i class="el-icon-circle-plus"></i></span>
                            <span class="icon-fontsize" ><i class="el-icon-remove" v-if='index !=0' @click='deleteFormValue(key)'></i></span>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setNewVisible',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            form:{
                value:""
            }
        };
    },
    computed: {
        newVisible(){
            return this.$store.state.sysStore.newVisible
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        async deleteFormValue(key){
            this.$delete(this.form,key)
        },
        async addFormValue(key){
            let i = 0
            let flag = true
            for(let key in this.form){
                if(!this.form[key]){
                    flag = false
                }
                i++
            }
            if(!this.form[key]){
                this.comm.showMsg(false,this.$t('sale_js_msg_no_wifiSn'))
                return
            }
            let res = await this.API.saleCheckSalFlowWifiSN({
                wifiSn:this.form[key]
            })
            if(res.msg == 1){
                this.showMsg(this.$t('transferRates.js.wifisn.error'))
                return 
            }else if(res.msg == 2){
                 this.showMsg(this.$t('sale_buyPage.js_wifiSn＿isnot＿generated＿or＿added＿to＿the＿sales＿table'))
                return 
            }else if(res.msg == 3){
                 this.showMsg(this.$t('sale_buyPage.js_sale_wifiSN_already_installed_byOwn'))
                return 
            }else if(res.msg == 4){
                 this.showMsg(this.$t('sale_buyPage.js_sale_wifiSN_already_installed_byOther'))
                return 
            }
            // this.form['value'+i] = ''
            if(flag && res.success){
                this.$set(this.form,'value'+i,'')
            }else{
                this.$message({
                    message: this.$t('transferRates.js.wifisn.error'),
                    type: 'warning'
                });
            }
        },
        async saleCheckSalFlowWifiSN(key){
            let res = await this.API.saleCheckSalFlowWifiSN({
                wifiSn:this.form[key]
            })
            console.log(res.success,'res.success');
            return res.success
        },
        showMsg(text){
            this.$message({
                message: text,
                type: 'warning'
            });
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.saleSaleAddNotRelation()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async saleSaleAddNotRelation(){
            let snArr = []
            for(let key in this.form){
                snArr.push(this.form[key])
            }
            let res = await this.API.saleSaleAddNotRelation({
                wifiSN:snArr.join(',')
            })
            if(this.comm.showMsg(res.success)){
                this.$store.commit('setNewVisible',false)
            }
        }
    },
};
</script>

<style  lang="less" >
.buyPage-main-box-add{
    .el-form-item__content{
        display: flex;
    }
    .icon-fontsize{
        font-size: 25px;
        margin-left: 10px;
        display: block;
        width: 25px;
        height: 33px;
    }
}
</style>
